<template>
  <h1 class="title">My Diy Calendar</h1>
  <div id="diyCalendar">
    <DiyCalendar v-model="myDate"></DiyCalendar>
  </div>
</template>
<script setup>
import DiyCalendar from "@/components/DiyCalendar.vue";
import { ref, watch } from "vue";
const myDate = ref(new Date(2023, 2, 21));

watch(myDate, (newVal) => {
  console.log("app中的myDate：", newVal);
});
</script>
<style scoped>
.title {
  margin: 20px 0;
  text-align: center;
  font-family: "Bradley Hand ITC";
}

#diyCalendar {
  width: 800px;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}
</style>
